<template>
    <div ref="root" id="root"></div>
    <a-modal width="400px" :title-align="'start'" v-model:visible="visible" title="初始化" :on-before-ok="handleClick" :hide-cancel="true">
        <a-form :model="form" :rules="rules" auto-label-width ref="formRef">
            <a-form-item field="accessToken" label="Access Token" :rules="[{ required: true, message: '请输入 Access Token' }]">
                <a-input v-model="form.accessToken" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { type FormInstance } from '@arco-design/web-vue'
import RC from '../embed'

const instance = ref()
const visible = ref(false)
const formRef = ref<FormInstance>()
const form = ref({
    accessToken: ''
})
const rules = ref({
    accessToken: [{ required: true, message: '请输入 Access Token' }]
})
const handleClick = async () => {
    console.log(await formRef.value?.validate())
    if ( !(await formRef.value?.validate())) {
        instance.value =  RC.init('root', form.value.accessToken, true);
        // @ts-ignore
        window.rc_instance = instance.value
        instance.value.on(RC.EVENTS.EXPIRED, () => {
            console.log('token expired')
        })
        return true
    }
    return false
}
onMounted(() => {
   const searchParams = new URLSearchParams(window.location.search)
   const accessToken = searchParams.get('access_token')
   if (accessToken) {
    form.value.accessToken = accessToken
    handleClick()
   }else {
    visible.value = true
   }
})
</script>
<style scoped >
 #root {
    width: 100vw;
    height: 100vh;
 }
</style>
